<template>
<div>
  <div id="poi"></div>
</div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { Scene, PointLayer } from '@antv/l7'
import { DrawCircle, DrawControl } from '@antv/l7-draw'
import { GaodeMap } from '@antv/l7-maps'

@Component
export default class Poi extends Vue {
  mounted () {
    const scene = new Scene({
      id: 'poi',
      map: new GaodeMap({
        pitch: 0,
        style: 'light',
        center: [121.435159, 31.256971],
        zoom: 14.89,
        minZoom: 10
      })
    })

    scene.on('loaded', () => {
      // const layer1 = new window.AMap.TileLayer.Satellite()
      // ;(scene as any).map.setLayers([])
      // layer1.setMap((scene as any).map)
      const drawControl = new DrawControl(scene, {
        position: 'topright',
        layout: 'horizontal', // horizontal vertical
        controls: {
          point: true,
          polygon: true,
          line: true,
          circle: true,
          rect: true,
          delete: true
        }
      })
      scene.addControl(drawControl)
    })

    this.$http('/eleme/stat/points')
      // .then((data: any) => data?.rows || [])
      .then(data => {
        const pointLayer = new PointLayer({})
          .source(data, {
            parser: {
              type: 'json',
              x: 'longitude',
              y: 'latitude'
            }
          })
          .shape('name', [
            'circle'
            // 'triangle',
            // 'square',
            // 'pentagon',
            // 'hexagon',
            // 'octogon',
            // 'hexagram',
            // 'rhombus',
            // 'vesica'
          ])
          .size('recent_order_num', [1, 8])
          .color('recent_order_num', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
          .style({
            opacity: 0.3,
            strokeWidth: 2
          })

        scene.addLayer(pointLayer)
      })
  }
}
</script>

<style lang="scss">
#poi {
  width: 100%;
  height: calc(100vh - 60px - 40px);
  position: relative;
}
</style>
